<template>
	<view class="tabbar">
		<view class="tabbar-bg-box">
			<image class="tabbar-bg"
				:src="bgImage"
				mode="aspectFill">
			</image>
			<view class="mid-icon" @tap="midClick">
				<image 
					:src="tabbarIndex==2 ? midbutton.selectedIconPath :midbutton.iconPath"
					mode="aspectFill">
				</image>
			</view>
			<view class="tabbar-box">
				<view class="tabbar-item" v-for="(v,k) in data" :key="k" @tap="tabbarItemClick(v,k)">
					<image class="tabbar-icon" :src="tabbarIndex==k?v.selectedIconPath:v.iconPath" mode="aspectFill">
					</image>
					<view class="tabbar-text" :class="tabbarIndex==k?'tabbar-text-select':''">{{v.text}}</view>
				</view>
			</view>
		</view>
		<!-- IOS安全距离START -->
		<view class="ios-aq"></view>
		<!-- IOS安全距离END -->
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { tabbarConfig } from './tabbarConfig';
import type { TabItem } from './tabbar.type';

export default defineComponent({
  name: "tabbar",
  props: {
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tabbarIndex: 0,
      bgImage:tabbarConfig.bgImage,
      midbutton: {
        pagePath: "/pages/sleep/index",
        iconPath: "../../static/img/tabbar/sleep.png",
        selectedIconPath: "../../static/img/tabbar/sleep_art.png",
        text: "睡眠"
      },
      data: [
        {
          pagePath: "/pages/index/index",
          iconPath: "../../static/img/tabbar/home.png",
          selectedIconPath: "../../static/img/tabbar/home_art.png",
          text: "首页"
        },
        {
          pagePath: "/pages/music/index",
          iconPath: "../../static/img/tabbar/music.png",
          selectedIconPath: "../../static/img/tabbar/music_art.png",
          text: "音乐"
        },
        {
          pagePath: "",
          iconPath: "",
          selectedIconPath: "",
          text: ""
        },
        {
          pagePath: "/pages/report/index",
          iconPath: "../../static/img/tabbar/history.png",
          selectedIconPath: "../../static/img/tabbar/history_art.png",
          text: "报告"
        },
        {
          pagePath: "/pages/center/index",
          iconPath: "../../static/img/tabbar/user.png",
          selectedIconPath: "../../static/img/tabbar/user_art.png",
          text: "我的"
        }
      ] as TabItem[]
    };
  },
  mounted() {
    this.tabbarIndex = this.index;
    uni.hideTabBar();
  },
  methods: {
    tabbarItemClick(v: TabItem, k: number) {
      uni.switchTab({
        url: v.pagePath
      });
    },
    midClick() {
      uni.switchTab({
        url: '/pages/sleep/index'
      });
    }
  }
});
</script>

<style lang="scss" scoped>
	page,
	block,
	view,
	scroll-view,
	swiper,
	movable-view,
	icon,
	text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	picker,
	picker-view,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	image,
	video,
	map,
	canvas,
	contact-button,
	cover-image,
	cover-view {
		box-sizing: border-box;
	}

	.tabbar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 8vh;
		z-index: 9999; 
		.ios-aq {
			height: env(safe-area-inset-bottom);
			background-color: #FFFFFF;
		}

		.tabbar-bg-box {
			width: 100%;
			height: 8vh;
			position: relative;

			.tabbar-bg {
				width: 100%;
				height: 100%;
			}

			.mid-icon {
				position: absolute;
				top: -12rpx;
				left: 46%;
				transform: translateX(-50%);
				border-radius: 999px;
				width: 92rpx;
				height: 92rpx;
				// background-color: #007AFF;
				padding: 30rpx;
				z-index: 10;

				image {
					width: 92rpx;
					height: 92rpx;
					// background-color: #007AFF;
				}
			}

			.tabbar-box {
				width: 100%;
				height: 96rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;

				.tabbar-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tabbar-icon {
						width: 45rpx;
						height: 45rpx;
						// padding: 2px;
						/*  */
					}

					.tabbar-text {
						color: #222222;
						margin-top: 6rpx;
						line-height: 1;
						font-size: 20rpx;
					}

					.tabbar-text-select {
						font-weight: 900;
						color: #222222;
					}
				}
			}
		}
	}
</style>
